<template>
  <view class="container">
    <camera device-position="back" flash="auto" @error="error" class="camera">
      <cover-view class="cover-view">
        <cover-view class="cover-view-top"></cover-view>
        <cover-view class="scan-img-view">
          <cover-image class="scan-img" id="scanImg"></cover-image>
          <cover-view class="tips">
            <cover-view>{{tips}}</cover-view>
          </cover-view>
        </cover-view>
        <cover-view class="cover-view-bot">
          <cover-image  class="take-img" @click="takePhoto"></cover-image>
        </cover-view>
        <cover-view class="id-card-info" v-if="dialogVisible">
          <cover-view class="middle">
            <cover-view class="title">识别结果</cover-view>
            <cover-view class="content">
              <cover-view class="item">
                <cover-view class="label">姓名: </cover-view>
                <cover-view class="value">{{cradInfo.name}}</cover-view>
              </cover-view>
              <cover-view class="item">
                <cover-view class="label">出生日期: </cover-view>
                <cover-view class="value">{{cradInfo.birthdate}}</cover-view>
              </cover-view>
              <view class="item">
                <cover-view class="label">性别: </cover-view>
                <cover-view class="value">{{cradInfo.sex === '801' ? '男':'女'}}</cover-view>
              </view>
              <view class="item">
                <cover-view class="label">身份证号: </cover-view>
                <cover-view class="value">{{cradInfo.idNo}}</cover-view>
              </view>
            </cover-view>
            <cover-view class="footer">
              <cover-view class="btn sure">确认信息</cover-view>
              <cover-view class="btn cancel" @click="closeDialog">重新识别</cover-view>
            </cover-view>
          </cover-view>
        </cover-view>
      </cover-view>
    </camera>
  </view>
</template>
 
<script>
let t
export default {
  data() {
    return {
      cradInfo: {},
      dialogVisible: false,
      tips: '请将身份证置于拍照区域拍照'
    }
  },
  onShow() {
    const timer = setTimeout(() => {
      this.setTipsStatus()
      clearTimeout(timer)
    }, 1000)
  },
  methods: {
    setTipsStatus() {
      let num = 0
      t = setInterval(() => {
        num++
        if (num > 4) {
          num = 0
        }
        this.tips = '请将身份证置于拍照区域拍照' + '....'.substring(0, num)
      }, 1000)
    },
    takePhoto() {
      const ctx = uni.createCameraContext()
      ctx.takePhoto({
        quality: 'high',
        success: async res => {
          this.drawCanvas(res.tempImagePath)
        },
        fail: err => {
          uni.hideLoading()
          uni.showToast({
            title: '生成图片错误, 请稍后重试！'
          })
        }
      })
    },
    drawCanvas(path) {
      uni.showLoading({
        title: '正在生成图片...'
      })
      let base64String = `${wx.getFileSystemManager().readFileSync(path, "base64")}`
      this.getBDtoken().then(data => {
        const params = {
          access_token: data.data.access_token,
          data: {
            image: base64String,
            id_card_side: 'front'
          }
        }
        this.getIdCard(params).then(res => {
          if (res) {
            const result = res.data.words_result
            this.cradInfo = {
              idNo: result['公民身份号码'] ? result['公民身份号码'].words : '',
              name: result['姓名'] ? result['姓名'].words : '',
              sex: result['性别'] ? (result['性别'].words === '男' ? '801' : '802') : '801',
              birthdate: result['出生'] ? (result['出生'].words.substring(0, 4) + '-' + result['出生'].words.substring(4, 6) + '-' + result['出生'].words.substring(6, 8)) : '',
            }
            this.dialogVisible = true
          }
        })
      })
    },
    getBDtoken() {
      uni.showLoading({
        title: '正在连接服务...'
      })
      return new Promise(resolve => {
        uni.request({
          url: 'https://aip.baidubce.com/oauth/2.0/token',
          data: {
            'grant_type': 'client_credentials',
            'client_id': 'Vfn44srYbYsZBCGirWajxlY7',
            'client_secret': 'CvSbi1QKwhVW1ARU2lSHhlzGVqEhQmTq'
          },
          method: 'GET',
          success(res) {
            resolve(res)
          },
          fail(e) {
            uni.hideLoading()
            uni.showToast({
                title: '连接服务出错，请稍后再试!'
            })
          }
        })
      })
    },
    getIdCard(params) {
      uni.showLoading({
        title: '正在解析...'
      })
      return new Promise(resolve => {
        uni.request({
          url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=' + params.access_token,
          data: params.data,
          method: 'POST',
          header: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          success(res) {
            uni.hideLoading()
            resolve(res)
          },
          fail(e) {
            uni.hideLoading()
            uni.showToast({
                title: '解析出错，请稍后再试!'
            })
          },
          complete() {
          }
        })
      })
    },
    error(e) {
      console.log(e.detail);
    },
    closeDialog() {
      this.dialogVisible = false
      this.cradInfo = {}
    }
  }
}
</script>
 
<style lang="scss" scoped>
 
.container{
  position: relative;
}
 
.camera {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  width: 750upx;
  height: 100%;
}
 
.cover-view {
  width: 750upx;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
 
.cover-view-top {
  width: 750upx;
  height: 200upx;
  background-color: rgba(0, 0, 0, .4);
}
 
.cover-view-bot {
  flex: 1;
  width: 750upx;
  background-color: rgba(0, 0, 0, .4);
  display: flex;
  justify-content: center;
  align-items: center;
 
  .take-img {
    width: 120upx;
    height: 120upx;
  }
}
 
.canvas{
  position: absolute;
  top: 240upx;
  left: 45upx;
  height: 410upx;
  width: 660upx;
}
 
.scan-img-view{
  position: relative;
  .scan-img {
    opacity: 0.4;
    width: 100%;
    height: 500upx;
  }
  .tips{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 32rpx;
  }
}
 
.id-card-info{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, .8);
  z-index: 999999 !important;
  .middle{
    width: 550upx;
    height: 600upx;
    background-color: #ffffff;
    border-radius: 20upx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .title{
      font-size: 30rpx;
      height: 100upx;
      line-height: 100upx;
      text-align: center;
      font-weight: bold;
    }
    .content{
      flex: 1;
      width: 100%;
      padding-left: 50upx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      .item{
        display: flex;
        margin-bottom: 20upx;
        font-size: 30rpx;
        .label{
          color: red;
        }
        .value{
          margin-left: 10upx;
        }
      }
    }
    .footer{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20upx;
      .btn{
        width: 450upx;
        height: 80upx;
        border-radius: 60upx;
        line-height: 80upx;
        text-align: center;
      }
      .sure{
        color: #ffffff;
        background-color: red;
        margin-bottom: 20upx;
      }
      .cancel{
        color: grey;
        background-color: red;
      }
    }
  }
}
</style>